<form class="ns-form">
  <mat-form-field>
    <input matInput type="text" placeholder="命名空间" (ngModelChange)="searchSubject.next({key: $event})" name="key"
      [(ngModel)]="formData.key">
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" placeholder="名称" (ngModelChange)="searchSubject.next({name: $event})" name="name"
      [(ngModel)]="formData.name">
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="服务状态" name="offline" [(ngModel)]="formData.offline" (change)="searchSubject.next({})">
      <mat-option *ngFor="let state of stateList" [value]="state.value">{{state.title}}</mat-option>
    </mat-select>
  </mat-form-field>

  <a mat-raised-button color="accent" (click)="searchSubject.next({})">搜索</a>

  <a mat-raised-button class="pull-right" color="accent" (click)="addNs()">新增命名空间</a>
</form>

<table class="table">
  <thead>
    <tr>
      <th colspan="7">
        在线统计：{{allNsOnline.clientCount}} 个终端 {{allNsOnline.userCount}} 个用户 {{allNsOnline.roomCount}} 个房间
      </th>
    </tr>
    <tr>
      <th>命名空间</th>
      <th>名称</th>
      <th>&nbsp;累计客户端&nbsp;</th>
      <th>&nbsp;在线统计&nbsp;</th>
      <th>&nbsp;上线/离线&nbsp;</th>
      <th class="center">修改日期</th>
      <th class="center">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of nsList;let i = index">
      <td style="width: 280px;">{{item.key}}</td>
      <td style="width: 280px;">{{item.name}}</td>
      <td class="center">{{item.totalClientCount}}</td>
      <td class="center" matTooltip="{{'终端数:' + item.clientCount + ' 用户数:' + item.userCount + ' 房间数:' + item.roomCount}}"
        matTooltipPosition="above">{{item.clientCount}} - {{item.userCount}} - {{item.roomCount}}</td>
      <td class="center">{{item.offline === 'on' ? '离线' : '上线'}}</td>
      <td>{{item.update_date | date:'yyyy-MM-dd HH:mm:ss'}}</td>
      <td>
        <button mat-button color="accent" (click)="dashboard(item)" *ngIf="item.key !== '/'">
          进入
        </button>
        <button mat-button (click)="updateNs(item)" color="accent">修改</button>
        <mat-menu #moreMenu="matMenu">
          <button mat-menu-item (click)="toggleOffline(item)" color="accent">{{item.offline === 'off' ? '服务下线':'服务上线'}}</button>
          <button mat-menu-item (click)="clearRealTimeData(item,i)" color="warn" [disabled]="item.offline === 'off'">清空实时数据</button>
          <button mat-menu-item (click)="clearLegacyClient(item,i)" color="warn" [disabled]="item.offline === 'off'">删除僵尸客户端</button>
          <button mat-menu-item (click)="clearNs(item,i)" color="warn" [disabled]="item.offline === 'off'">清空数据</button>
          <button mat-menu-item (click)="flushNs(item,i)" color="warn" [disabled]="item.offline === 'off'">删除</button>
        </mat-menu>
        <button mat-button [matMenuTriggerFor]="moreMenu" color="accent" *ngIf="item.key !== '/'">更多</button>
      </td>
    </tr>
  </tbody>
</table>

<div class="no-result" *ngIf="nsList && !nsList.length">
  暂无数据
</div>

<mat-paginator [length]="nsTotal" (page)="searchSubject.next({page: $event.pageIndex + 1,pageSize: $event.pageSize})"
  [pageIndex]="formData.page - 1" [pageSize]="formData.pageSize" [pageSizeOptions]="[5,10,20,30,100]"></mat-paginator>
